<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/header.css">

	</head>


	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title">消息通知中心</h1>
		</header>


		<div class="mui-content">
			<ul class="mui-table-view" id="userListS">

			</ul>
		</div>


	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/app.js"></script>

	<script type="text/javascript">
		mui.init({
				swipeBack: true //启用右滑关闭功能
			});

		mui.plusReady(function() {
			//查看请求消息
			function loadingFriendRequest() {
				mui.ajax(app.serverUrl + '/user/queryRequestMsgList', {
					data: {
						id: app.getUserGlobalInfo().id
					},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						if (data.status == 200) {
							console.log(JSON.stringify(data));
							var userList = data.data;
							var centent = queryRequestMsgListHtml(userList);
							if (userList.length > 0) {
								document.getElementById("userListS").innerHTML = centent;
								document.getElementById('userListS').addEventListener('click', function(e) {
									var friendId = e.target.getAttribute('friendId');
									var flag = e.target.getAttribute('flag');
									if (flag == 0) {
										operatorFriendRequest(app.getUserGlobalInfo().id, friendId, flag);
									} else {
										operatorFriendRequest(app.getUserGlobalInfo().id, friendId, flag);
									}


								})
							} else {
								document.getElementById("userListS").innerHTML =
									`
									<li class="btnOper mui-table-view-cell mui-media">										
												<p class="mui-ellipsis" style="text-align: center;">暂时无消息</p>
									</li>
								
								
								`;
							}


						} else { //服务器返回的数据为空,表明账户与密码验证失败
							app.showToast(data.data, "error"); //弹出错误信息
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						if (textStatus == "timeout") {
							mui.toast("连接超时"); //超过十秒报错
						} else if (textStatus == "error") {
							mui.toast("连接出错");
						}
					}
				});
			}

			loadingFriendRequest();

			//获取拼接好的html代码
			function queryRequestMsgListHtml(userList) {
				
				var centent = '';
				for (var i = 0; i < userList.length; i++) {
					var faceImage = userList[i].faceImage.substring(0, 4) === "http" ? userList[i].faceImage : app.imgServerUrl +
						userList[i].faceImage;
					console.log(JSON.stringify(userList[i]));
					var str =
						`
						<li class="btnOper mui-table-view-cell mui-media">
							<a href="javascript:;">
								<button type="button" flag=0 friendId=` +
						userList[i].id +
						` class="mui-btn mui-btn-danger">拒绝</button>
								<button type="button" flag=1 friendId=` + userList[
							i].id +
						` class="mui-btn mui-btn-success" style="right: 20%;">接受</button>
								<img class="mui-media-object mui-pull-left" src="`+faceImage+`">
								<div class="mui-media-body">
									<span>` +
						userList[i].nickname +
						`</span>
									<p class="mui-ellipsis">请求添加你为好友</p>
								</div>
							</a>
						</li>
					`
					centent += str;
				}
				return centent;
			}




			//处理好友请求
			function operatorFriendRequest(userId, firendId, operType) {
				console.log(operType);
				mui.ajax(app.serverUrl + "/user/operFirendRequest?accpetUserId=" + userId + "&sendUserId=" + firendId +
					"&operType=" + operType, {
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//更新通讯录
							var myFriendList = data.data;
							app.setContactList(myFriendList);
							//加载好友请求记录
							loadingFriendRequest();
							//重载
							var wobj = plus.webview.getWebviewById("wh-contact.html");
							wobj.reload(true);
						}

					});
			}



		})
	</script>

</html>
